<template>
  <div style="width: 90%">
    <div>
      <userIndexSwiper />
    </div>
    <div class="song-table">
      <div class="song-container">
        <div class="handle-box">
          <el-form :inline="true" :model="searchParams" @keyup.enter.native="getSongByPage()">
            <el-form-item>
              <el-input v-model="searchParams.name" placeholder="参数名" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="getSongByPage()">查询</el-button>
              <!--<el-button v-if="isAuth('product:brand:save')" type="primary" @click="singerAddDialogVisible=true">新增</el-button>-->
              <!--<el-button v-if="isAuth('product:brand:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>-->
            </el-form-item>
          </el-form>
          <el-table size="mini"
                    :border="true"
                    :data="songList"
                  >
            <el-table-column label="歌曲名称" align="center" width="200px">
              <template slot-scope="scope">
                {{scope.row.name}}
              </template>
            </el-table-column>
            <el-table-column label="歌曲图片"  align="center" width="200px">
              <template slot-scope="scope">
                <div class="song-img">
                  <img :src="scope.row.pic">
                </div>
              </template>
            </el-table-column>
            <el-table-column label="歌手名称" align="center" width="80px">
              <template slot-scope="scope">
                {{scope.row.singerName}}
              </template>
            </el-table-column>
            <el-table-column label="歌曲介绍" align="center">
              <template slot-scope="scope">
                {{scope.row.introduction}}
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              header-align="center"
              align="center"
              label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="testListenHandle(scope.row.url)">试听</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
          <el-dialog
            title="试听"
            :visible.sync="testListenDialogVisible"
            width="50%" :center="true">
            <audio :src="testSongUrl" controls="controls" ></audio>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import userIndexSwiper from '@/components/Swiper/userIndexSwiper'
export default {
  name: 'index',
  components: {
    userIndexSwiper
  },
  data () {
    return { searchParams: {
      name: ''
    },
    testSongUrl: '',
    testListenDialogVisible: false,
    songList: [],
    pageIndex: 1,
    pageSize: 10,
    totalPage: 0
    }
  },
  created () {
    this.getSongByPage()
  },
  methods: {
    testListenHandle (url) {
      this.testSongUrl = url
      this.testListenDialogVisible = true
    },
    getSex (sex) {
      if (sex === 0) {
        return '女'
      } else if (sex === 1) {
        return '男'
      } else if (sex === 2) {
        return '组合'
      } else {
        return '未知'
      }
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getSongByPage()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getSongByPage()
    },
    getSongByPage () {
      let that = this
      that.songList = []
      let request = {
        params: {
          page: that.pageIndex,
          limit: that.pageSize,
          name: that.searchParams.name
        }
      }
      console.log(88888)
      that.$api.getSongByPage(request).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          that.songList = res.data.data.list
          this.totalPage = res.data.data.totalCount
          that.songAddDialogVisible = false
        } else {
          console.log(res.data)
        }
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>
  .song-table{
    margin: auto;
    width: 90%;
  }
  .handle-box{
    margin-top: 10px;
    display: block;
  }
  .song-img img{
    width: 140px;
    height: 140px;
    max-width: 100%;
    max-height: 100%;
    border-radius: 5px;
  }
  body .el-table th.gutter{
    display: table-cell!important;
  }

</style>
